$(document).ready(function() {
    $('#TransactionType').change(function() {
        var value = $(this).val();
        $.ajax({
            type: 'post',
            url: "http://localhost/moneylover/transactions/getcategory",
            data: {value: value},
            dataType: 'json',
            timeout: 10000,
            error: function(xhr, status, error) {
                alert("Error: " + xhr.status + '-' + error);
            },
            success: function(response) {
                $('#TransactionCategoryId').html('');
                for (var key in response) {
                    $('#TransactionCategoryId').append('<option value="' + key + '">' + response[key] + '</option>');
                }
            }
        });

        return false;
    });

    $("#TransactionTypeIndex").change(function() {
        var value = $(this).val();
        $.ajax({
            type: 'post',
            url: 'http://localhost/moneylover/transactions/getcategory',
            data: {value: value},
            dataType: 'json',
            timeout: 10000,
            error: function(xhr, status, error) {
                alert('Error:' + xhr.status + '-' + error);
            },
            success: function(res) {
                $("#category").html("");
                for (var key in res) {
                    $('#category').append('<option value="' + key + '">' + res[key] + '</option>');
                }
            }
        });
        return false;
    });

    $("#category").change(function() {
        var value = $('#category option:selected').val();
        $('#load').removeClass('hidden').addClass('show');
        $.ajax({
            type: 'post',
            url: "http://localhost/moneylover/transactions/get_transaction_cate",
            data: {value: value},
            dataType: 'json',
            timeout: 10000,
            error: function(xhr, status, error) {
                alert('Error' + xhr.status + '-' + error)
            },
            success: function(res) {
                $('#load').removeClass('show').addClass('hidden');
                $("#container").html("");
                if (res === null) {
                    $("#container").text("<p class='alert alert-warning'>No Transaction!</p>");
                } else {
                    $.each(res, function(key) {

                        var edit = "<a href ='transactions/edit/" + res[key].Transaction.id + "'" + "class='btn btn-sm btn-warning glyphicon glyphicon-edit' target='_blank'>Edit</a>";
                        var view = "<a href ='transactions/view/" + res[key].Transaction.id + "'" + "class='btn btn-sm btn-info glyphicon glyphicon-eye-open' target='_blank'>View</a>";
                        var output = '<div class="panel panel-default">' +
                                '<div class="panel-heading">' +
                                '<h3 class="glyphicon glyphicon-calendar">Date time: <span class="text-warning">' + res[key].Transaction.created + '</span>' +
                                '</h3>' +
                                '</div>' +
                                '<div class="panel-body">' +
                                '<p>' +
                                '<span class="glyphicon glyphicon-tag"> </span>Wallet: <span class="text-info">' + res[key].Wallet.name + '</span></p>' +
                                '<p>' +
                                '<span class="glyphicon glyphicon-tag"> </span>Category: <span class="text-info">' + res[key].Category.name +
                                '</span></p>' +
                                '<p><span class="glyphicon glyphicon-usd"> </span>Money: <span class="text-danger">' + res[key].Transaction.money + ' VNĐ </span>' +
                                '</p>' +
                                '<p><span class="glyphicon glyphicon-user"> </span>With:' + res[key].Transaction.with_who +
                                '</p>' +
                                '</div>' +
                                '<div class="panel-footer">' +
                                '</div>';

                        output += '<div class="panel-footer">' + view + '   ' + edit + '</div></div>';


                        $('#container').append(output);


                    });
                }



            }

        });
        return false;
    });

    $("#TransactionDate").change(function() {
        var value = $("#TransactionDate option:selected").text();
        $('#load').removeClass('hidden').addClass('show');

        $.ajax({
            type: 'post',
            url: "http://localhost/moneylover/transactions/get_transaction_date",
            data: {value: value},
            dataType: 'json',
            timeout: 10000,
            error: function(xhr, status, error) {
                alert('Error' + xhr.status + '-' + error)
            },
            success: function(res) {
                $('#load').removeClass('show').addClass('hidden');
                $("#container").html("");

                if (res == "") {
                    $("#container").html("<p class='alert alert-warning'>No Transaction!</p><br/><br/><br/>");
                } else {
                    $.each(res, function(key) {

                        var edit = "<a href ='transactions/edit/" + res[key].Transaction.id + "'" + "class='btn btn-sm btn-warning glyphicon glyphicon-edit' target='_blank'>Edit</a>";
                        var view = "<a href ='transactions/view/" + res[key].Transaction.id + "'" + "class='btn btn-sm btn-info glyphicon glyphicon-eye-open' target='_blank'>View</a>";
                        var output = '<div class="panel panel-default">' +
                                '<div class="panel-heading">' +
                                '<h3 class="glyphicon glyphicon-calendar">Date time: <span class="text-warning">' + res[key].Transaction.created + '</span>' +
                                '</h3>' +
                                '</div>' +
                                '<div class="panel-body">' +
                                '<p>' +
                                '<span class="glyphicon glyphicon-tag"> </span>Wallet: <span class="text-info">' + res[key].Wallet.name + '</span></p>' +
                                '<p>' +
                                '<span class="glyphicon glyphicon-tag"> </span>Category: <span class="text-info">' + res[key].Category.name +
                                '</span></p>' +
                                '<p><span class="glyphicon glyphicon-usd"> </span>Money: <span class="text-danger">' + res[key].Transaction.money + ' VNĐ </span>' +
                                '</p>' +
                                '<p><span class="glyphicon glyphicon-user"> </span>With:' + res[key].Transaction.with_who +
                                '</p>' +
                                '</div>' +
                                '<div class="panel-footer">' +
                                '</div>';

                        output += '<div class="panel-footer">' + view + '   ' + edit + '</div></div>';


                        $('#container').append(output);


                    });
                }

            }

        });
        return false;
    });
});